import React,{useState,useEffect} from "react";
import {$getImg} from "../../api/authorityapi";
import {Button} from "antd";
import {CheckSquareOutlined, CloseSquareOutlined} from "@ant-design/icons";
import {$CheckAuthority} from "../../api/authorityapi";
import MyNotification from "../../components/MyNotification/MyNotification";
export default function Authority({authority}){
    //为了讲useEffect中获取的图片数据在return中获得
    const [imgdata, setImgData] = useState(null);
    //通知框状态
    const [notiMsg, setNotiMsg] = useState({ type: "", description: "" });
    //获取工牌照片
    const getImg=async ()=>{
        const response =await $getImg({verificationId:authority.verificationId});
        console.log(response);
        if(response.code) {
            setImgData(response.data);
        }
    }
    //按钮的点击事件
    const Check= async (value)=>{
        const response =await $CheckAuthority({verificationId:authority.verificationId,flag:value});
        if (response.code){
            setNotiMsg({ type: "success", description: response.message });
        }else{
            setNotiMsg({ type: "error", description: response.message })
        }
    }
    useEffect(() => {
            getImg();//获取图片
    }, []);
    return(
        <div style={{borderBottom:'4px solid rgb(221, 240, 238)'}}>
            <div className='top'style={{marginTop:'20px',marginLeft:'30px',marginBottom:'10px'}}>
                <div style={{fontWeight:'bold',fontSize:'25px',marginBottom:'10px'}}>个人情况简述</div>
                <div style={{}}>{authority.content}</div>
            </div>
            <div className='bottom'>
                <div style={{fontWeight:'bold',fontSize:'25px',marginLeft:'30px'}}>需审核信息如下</div>
                <div style={{display:'flex'}}>
                    <div className='left' style={{marginLeft:'30px',marginTop:'30px',marginBottom:'20px'}} >
                        <div style={{display:"flex",marginBottom:'10px'}}>
                            <span>公司名称:</span>
                            <div style={{marginLeft:'10px'}}>腾讯</div>
                        </div>
                        <div style={{display:'flex'}}>
                            <div>工牌照片：</div>
                            <div>
                                <img src={`data:image/jpeg;base64,${imgdata}`} width='130px' height='130px'
                                     alt="获取图片失败"/>
                            </div>
                        </div>

                    </div>
                    <div className='center' style={{marginLeft:'270px',marginTop:'30px',marginBottom:'20px'}} >
                        <div style={{display: 'flex',marginBottom:'10px'}}>
                            <div style={{marginRight:'10px'}}>公司地点:</div>
                            <div>成都</div>
                        </div>
                        <div style={{display: 'flex'}}>
                            <div style={{marginRight:'10px'}}>联系电话:</div>
                            <div>13875655</div>
                        </div>
                    </div>
                    <div className='right' style={{marginLeft: '150px',marginTop:'50px'}}>
                        <div className='button' style={{display: 'flex',marginTop:'100px'}}>
                            <Button icon={<CheckSquareOutlined/>} style={{
                                backgroundColor: 'rgb(1, 186, 173)',
                                color: 'white',
                                marginRight: '20px',
                                borderRadius: '20px'
                            }} onClick={() => Check(1)}>通过</Button>
                            <Button icon={<CloseSquareOutlined/>} style={{
                                backgroundColor: 'rgb(204, 204, 204)',
                                color: 'white',
                                borderRadius: '20px'
                            }} onClick={() => Check(0)}>驳回</Button>
                        </div>
                    </div>
                </div>
            </div>
            <MyNotification notiMsg={notiMsg}/>
        </div>
    )
}